<template>
  <div>
    <div class="Mine">
        <div class="topBg">
            <span class="title">我的</span>
        </div>
        <div class="topRadianBg"></div>
        <div class="userInfoView">
            <x-img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1585132765502&di=d68abde323ca96ff1d81e8f82e7424a3&imgtype=0&src=http%3A%2F%2Ff.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2F4b90f603738da977d4f1a49ab351f8198718e3a1.jpg" class="userIcon"></x-img>
            <div class="info">
                <p class="userName">刘德华
                    <span class="identity">(管理员)</span>
                </p>
                <p class="generalText sf">身份:
                    <x-img class="iconBg"></x-img>
                    <!-- <p class="generalText">有效期</p> -->
                    <span class="generalText yxq">有效期:&nbsp;&nbsp;365天</span>
                 </p>
                <p class="generalText sf">入会时间:&nbsp;&nbsp;2020-03-09
                    <span class="details" @click="push">详情</span>
                </p>
            </div>

        
        
        </div>
            <div class="bottomView">
            <p class="listTitle">会员资料</p>
            <ul class="list">
                <li class="listItem">
                    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1585132765502&di=d68abde323ca96ff1d81e8f82e7424a3&imgtype=0&src=http%3A%2F%2Ff.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2F4b90f603738da977d4f1a49ab351f8198718e3a1.jpg" class="itemImg" />

                    
                    <p class="itemTitle">个人名片
                    </p>
                </li>
                <li class="listItem">
                    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1585132765502&di=d68abde323ca96ff1d81e8f82e7424a3&imgtype=0&src=http%3A%2F%2Ff.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2F4b90f603738da977d4f1a49ab351f8198718e3a1.jpg" class="itemImg" />

                    
                    <p class="itemTitle">企业介绍
                    </p>
                </li>
                   <li class="listItem">
                    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1585132765502&di=d68abde323ca96ff1d81e8f82e7424a3&imgtype=0&src=http%3A%2F%2Ff.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2F4b90f603738da977d4f1a49ab351f8198718e3a1.jpg" class="itemImg" />

                
                    <p class="itemTitle">成功案例
                    </p>
                </li>
                <li class="listItem">
                    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1585132765502&di=d68abde323ca96ff1d81e8f82e7424a3&imgtype=0&src=http%3A%2F%2Ff.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2F4b90f603738da977d4f1a49ab351f8198718e3a1.jpg" class="itemImg" />

                
                    <p class="itemTitle">Gains表
                    </p>
                </li>
            </ul>
            <p class="listTitle">会员资料</p>
            <ul class="list">
                <li class="listItem">
                    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1585132765502&di=d68abde323ca96ff1d81e8f82e7424a3&imgtype=0&src=http%3A%2F%2Ff.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2F4b90f603738da977d4f1a49ab351f8198718e3a1.jpg" class="itemImg" />

                    
                    <p class="itemTitle">我的嘉宾
                    </p>
                </li>
                <li class="listItem">
                    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1585132765502&di=d68abde323ca96ff1d81e8f82e7424a3&imgtype=0&src=http%3A%2F%2Ff.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2F4b90f603738da977d4f1a49ab351f8198718e3a1.jpg" class="itemImg" />

            
                    <p class="itemTitle">邀约管理
                    </p>
                </li>
                   <li class="listItem">
                    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1585132765502&di=d68abde323ca96ff1d81e8f82e7424a3&imgtype=0&src=http%3A%2F%2Ff.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2F4b90f603738da977d4f1a49ab351f8198718e3a1.jpg" class="itemImg" />

                
                    <p class="itemTitle">名片夹
                    </p>
                </li>
                <li class="listItem">
                    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1585132765502&di=d68abde323ca96ff1d81e8f82e7424a3&imgtype=0&src=http%3A%2F%2Ff.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2F4b90f603738da977d4f1a49ab351f8198718e3a1.jpg" class="itemImg" />

                    
                    <p class="itemTitle">有人找我
                    </p>
                </li>
            </ul>
            <p class="listTitle">会员资料</p>
            <ul class="list">
                <li class="listItem">
                    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1585132765502&di=d68abde323ca96ff1d81e8f82e7424a3&imgtype=0&src=http%3A%2F%2Ff.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2F4b90f603738da977d4f1a49ab351f8198718e3a1.jpg" class="itemImg" />

                    
                    <p class="itemTitle">缴费记录
                    </p>
                </li>
                <li class="listItem">
                    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1585132765502&di=d68abde323ca96ff1d81e8f82e7424a3&imgtype=0&src=http%3A%2F%2Ff.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2F4b90f603738da977d4f1a49ab351f8198718e3a1.jpg" class="itemImg" />

                    
                    <p class="itemTitle">缴会务费
                    </p>
                </li>
                   <li class="listItem">
                    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1585132765502&di=d68abde323ca96ff1d81e8f82e7424a3&imgtype=0&src=http%3A%2F%2Ff.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2F4b90f603738da977d4f1a49ab351f8198718e3a1.jpg" class="itemImg" />

                    
                    <p class="itemTitle">消息通知
                    </p>
                </li>
                <li class="listItem">
                    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1585132765502&di=d68abde323ca96ff1d81e8f82e7424a3&imgtype=0&src=http%3A%2F%2Ff.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2F4b90f603738da977d4f1a49ab351f8198718e3a1.jpg" class="itemImg" />

                    
                    <p class="itemTitle">签到记录
                    </p>
                </li>
            </ul>

        </div>

    </div>
  </div>
</template>
<script>
import { XImg } from 'vux'

export default {    
  name: 'Mine',
  data () {
    return {

    }
  },
  components: {
    XImg
  },
  methods: {
    push() {
        // alert('1');
        this.$router.push({name:'Activity'})
        // this.$router.push({name:'Guest'})

        

    }
   
  }
}
</script>

<style scoped>
  .RegistrationCompleted {
   
  }
 
  .topBg {
      width: 100%;
      height: 65px;
      background-color:#313233;
       display: flex;
       justify-content: center;
       align-items: center;
       flex-direction: column;
  }
   .title {
    margin-top: -15px;
    font-size: 18px;
    color:white;
  }
  .topRadianBg {
      width: 100%;
      height: 65px;
      background-color: #313233;
      border-bottom-left-radius: 55%;
      border-bottom-right-radius: 55%;
      position: absolute;
      z-index: -1;
  }
  .userInfoView {
      width: 93%;
      height: 120px;
      background-color: #EECD91;
      border-radius: 8px;
      box-shadow:2px 3px 10px #909090;
      margin: -15px auto 0;  
      display: flex;

  }
  .userIcon {
      width: 90px;
      height: 90px;
      margin: 15px;
  }
  .info {
      /* flex-wrap: wrap; */
      width: 100%;
      height: 100%;
  }
  .userName {
      margin-top: 15px;      
      margin-left: 0px;
      font-size: 18;

  }
  .identity {
      font-size: 14px;
  }
  .generalText {
      font-size: 14px;
      color: black;
  }
  .sf {
      margin-left: 0px;
      margin-top: 13px;
  }
  .yxq {
      margin-left: 20px;
  }
  .iconBg {
      width: 40px;
      height: 20px;
      margin-left: 5px;
      background-color: blue;
  }
  .details {
      background-color: #D59C58;
      width: 55px;
      height: 20px;
      font-size: 14px;
      margin-left: 10px;
      color: white;
      text-align:center;
      display: inline-block;
      border-radius: 10px;

  }
  .listTitle {
      margin-top: 30px;
      margin-left: 15px;
  }
  .list {
      display: flex;
      flex-direction: row;
  }
  .listItem {
      width: 25%;
      height: 80px;
      /* background-color: violet; */
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
  }
  .itemImg {
      margin-top: 10px;
      width: 50px;
      height: 50px;
  }
  .itemTitle {
      font-size: 14px;
  }
  
  
</style>